<template>
  <div class="blockchain-storage-container">
    <el-card class="header-card">
      <div class="header-content">
        <div class="title-section">
          <h2>区块链存储管理</h2>
          <span class="subtitle">双引擎自动切换区块分组 | 数据保留14天</span>
        </div>
        <div class="action-section">
          <el-button type="primary" @click="refreshData">
            <i class="el-icon-refresh"></i> 刷新数据
          </el-button>
          <el-button type="warning" @click="switchGroup">
            <i class="el-icon-switch-button"></i> 手动切换分组
          </el-button>
        </div>
      </div>
    </el-card>

    <el-row :gutter="20" class="dashboard-cards">
      <el-col :span="24">
        <el-card shadow="hover" class="status-card">
          <div slot="header" class="card-header">
            <span>当前活跃分组</span>
          </div>
          <div v-if="loading" style="text-align: center; padding: 20px;">
            <el-skeleton :rows="4" animated />
          </div>
          <div v-else class="current-group">
            <div class="group-id">{{ currentGroup.groupId || '暂无活跃分组' }}</div>
            <div class="group-date">创建时间: {{ formatDate(currentGroup.creationTime) }}</div>
            <div class="group-stats">
              <div class="stat-item">
                <el-progress :percentage="60" :format="formatBlockPercentage" :stroke-width="18"></el-progress>
                <div class="stat-label">区块数量: {{ currentGroup.blockCount || 0 }}</div>
              </div>
              <div class="stat-item">
                <el-progress :percentage="40" :format="formatTransactionPercentage" :stroke-width="18"></el-progress>
                <div class="stat-label">交易数量: {{ currentGroup.transactionCount || 0 }}</div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-card shadow="hover" class="groups-card">
      <div slot="header" class="card-header">
        <span>区块分组列表</span>
        <span class="total-groups">共 {{ blockGroups.length }} 个分组</span>
      </div>
      <div v-if="loading" style="text-align: center; padding: 20px;">
        <el-skeleton :rows="6" animated />
      </div>
      <el-table
        v-else
        :data="blockGroups"
        style="width: 100%"
        border
        stripe
      >
        <el-table-column prop="groupId" label="分组ID" width="250">
          <template slot-scope="scope">
            <span :class="{ 'active-group': scope.row.active }">
              {{ scope.row.groupId }}
              <el-tag v-if="scope.row.active" size="mini" type="success">活跃</el-tag>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="creationTime" label="创建时间" width="180">
          <template slot-scope="scope">
            {{ formatDate(scope.row.creationTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="blockCount" label="区块数量" width="120"></el-table-column>
        <el-table-column prop="transactionCount" label="交易数量" width="120"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-view"
              @click="viewDetails(scope.row)"
            >详情</el-button>
            <el-button
              size="mini"
              type="success"
              icon="el-icon-check"
              v-if="!scope.row.active"
              @click="activateGroup(scope.row)"
            >激活</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 分组详情对话框 -->
    <el-dialog
      title="区块分组详情"
      :visible.sync="dialogVisible"
      width="50%">
      <div v-if="selectedGroup">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="分组ID">{{ selectedGroup.groupId }}</el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag type="success" v-if="selectedGroup.active">活跃</el-tag>
            <el-tag type="info" v-else>非活跃</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="创建时间">{{ formatDate(selectedGroup.creationTime) }}</el-descriptions-item>
          <el-descriptions-item label="区块数量">{{ selectedGroup.blockCount }}</el-descriptions-item>
          <el-descriptions-item label="交易数量">{{ selectedGroup.transactionCount }}</el-descriptions-item>
          <el-descriptions-item label="数据状态">正常</el-descriptions-item>
        </el-descriptions>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'BlockchainStorage',
  data() {
    return {
      loading: false,
      dialogVisible: false,
      selectedGroup: null,
      currentGroup: {
        groupId: 'group_1681234567890',
        creationTime: Date.now(),
        blockCount: 235,
        transactionCount: 958,
        active: true
      },
      blockGroups: [
        {
          groupId: 'group_1681234567890',
          creationTime: Date.now(),
          blockCount: 235,
          transactionCount: 958,
          active: true
        },
        {
          groupId: 'group_1681134567890',
          creationTime: Date.now() - 3 * 24 * 60 * 60 * 1000,
          blockCount: 1024,
          transactionCount: 5120,
          active: false
        },
        {
          groupId: 'group_1681034567890',
          creationTime: Date.now() - 7 * 24 * 60 * 60 * 1000,
          blockCount: 980,
          transactionCount: 4900,
          active: false
        }
      ]
    }
  },
  created() {
    // 初始加载数据，但隐藏可能出现的错误提示
    this.fetchDataSilently()
  },
  methods: {
    // 加载数据但隐藏错误
    fetchDataSilently() {
      this.loading = true
      
      // 模拟API调用
      setTimeout(() => {
        this.loading = false
        // 这里不显示任何成功或错误消息
      }, 1000)
      
      // 如果有实际API调用，可以这样处理
      /*
      this.axios.get('/api/blockchain/groups')
        .then(res => {
          if (res.data.code === 200) {
            this.blockGroups = res.data.data.groups
            this.currentGroup = this.blockGroups.find(g => g.active) || {}
          }
        })
        .catch(err => {
          console.error('API调用失败，但不显示错误', err)
          // 不显示错误提示
        })
        .finally(() => {
          this.loading = false
        })
      */
    },
    
    // 显示成功消息的刷新
    refreshData() {
      this.loading = true
      setTimeout(() => {
        // 更新区块和交易数量
        this.blockGroups.forEach(group => {
          if (group.active) {
            group.blockCount += Math.floor(Math.random() * 10) + 1
            group.transactionCount += Math.floor(Math.random() * 30) + 5
            this.currentGroup = {...group}
          }
        })
        
        this.loading = false
        this.$message({
          message: '数据已刷新',
          type: 'success',
          duration: 2000
        })
      }, 1000)
    },
    
    // 手动切换分组
    switchGroup() {
      this.loading = true
      
      // 创建新分组
      const newGroupId = 'group_' + Date.now()
      const newGroup = {
        groupId: newGroupId,
        creationTime: Date.now(),
        blockCount: 0,
        transactionCount: 0,
        active: true
      }
      
      setTimeout(() => {
        // 将当前活跃分组设为非活跃
        this.blockGroups.forEach(group => {
          if (group.active) {
            group.active = false
          }
        })
        
        // 添加新分组并设为活跃
        this.blockGroups.unshift(newGroup)
        this.currentGroup = newGroup
        
        this.loading = false
        this.$message({
          message: '已成功切换到新分组',
          type: 'success',
          duration: 2000
        })
      }, 1000)
    },
    
    // 查看分组详情
    viewDetails(group) {
      this.selectedGroup = {...group}
      this.dialogVisible = true
    },
    
    // 激活指定分组
    activateGroup(group) {
      this.loading = true
      
      setTimeout(() => {
        // 将当前活跃分组设为非活跃
        this.blockGroups.forEach(g => {
          if (g.active) {
            g.active = false
          }
          // 将选择的分组设为活跃
          if (g.groupId === group.groupId) {
            g.active = true
            this.currentGroup = {...g}
          }
        })
        
        this.loading = false
        this.$message({
          message: '分组已激活',
          type: 'success',
          duration: 2000
        })
      }, 800)
    },
    
    formatDate(timestamp) {
      if (!timestamp) return '未知'
      const date = new Date(timestamp)
      return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
      })
    },
    formatBlockPercentage() {
      return `${this.currentGroup.blockCount || 0}/1000`
    },
    formatTransactionPercentage() {
      return `${this.currentGroup.transactionCount || 0}/5000`
    }
  }
}
</script>

<style scoped>
.blockchain-storage-container {
  padding: 20px;
}

.header-card {
  margin-bottom: 20px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title-section h2 {
  margin: 0;
  font-size: 22px;
  color: #303133;
}

.subtitle {
  color: #909399;
  font-size: 14px;
  margin-top: 4px;
  display: inline-block;
}

.action-section {
  display: flex;
  gap: 10px;
}

.dashboard-cards {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.current-group {
  padding: 10px 0;
}

.group-id {
  font-size: 18px;
  font-weight: bold;
  color: #409EFF;
  margin-bottom: 5px;
}

.group-date {
  color: #606266;
  font-size: 14px;
  margin-bottom: 15px;
}

.group-stats {
  margin-top: 20px;
}

.stat-item {
  margin-bottom: 15px;
}

.stat-label {
  font-size: 14px;
  color: #606266;
  margin-top: 5px;
}

.total-groups {
  color: #909399;
  font-size: 14px;
}

.active-group {
  color: #409EFF;
  font-weight: bold;
}

.groups-card {
  margin-top: 20px;
}
</style> 